<template>
  <div>
    <!-- <intellect-check></intellect-check> -->
    <!--
    <h3>滑块验证</h3>
    <slide-check :show="show" @callBack="callBack"></slide-check>
    <h3>无痕验证</h3>
    <notrace-check></notrace-check>
    -->
    <button type="button" @click="register" >注册</button>
    <button type="button" @click="login" >登录</button>
    <div id="captcha"></div>
  </div>
</template>
<script>
  import intellectCheck from '@/components/intellectCheck'
  import slideCheck from '@/components/slideCheck'
  import noTraceCheck from '@/components/noTraceCheck'
  export default {
    components: {
      [noTraceCheck.name]: noTraceCheck,
      [slideCheck.name]: slideCheck
    },
    data() {
      return {
        show: true,
        jsObj: {
          guide: '//g.alicdn.com/sd/nvc/1.1.112/guide.js?t=' + (new Date()).getTime()
        },
      }
    },
    async mounted() {
      this.init()
      await this.initJs(this.jsObj.guide)
    },
    methods: {
      // 引入文件
      async initJs(jsUrl) {
        return await new Promise((resolve) => {
          let script = document.createElement('script')
          let header = document.getElementsByTagName('head')[0]
          script.type = 'text/javascript'
          script.src = jsUrl
          header.appendChild(script)
          script.onload = script.onreadystatechange = function () {
            if (!this.readyState || this.readyState == 'loaded' || this.readyState == 'complete') {
              resolve(true)
            }
            script.onload.onload = script.onreadystatechange = null //删除事件处理函数。
          }
        })
      },
      init() {
        window.NVC_Opt = {
          //无痕配置 && 滑动验证、刮刮卡验证通用配置。
          //应用类型标识。它和使用场景标识（scene字段）一起决定了无痕验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
          appkey:'CF_APP_1',
          //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在人机验证控制台的配置管理页签找到对应的scene值，请务必正确填写。
          scene:'nvc_register_h5',
          //是否HTML5页面。对于HTML5页面类型，该参数值需填写true。
          isH5:true,
          //二次验证的唤醒方式。true为浮层式，false为嵌入式。
          popUp:false,
          //声明二次验证需要渲染的目标元素ID。
          renderTo:'#captcha',
          //回调参数。
          nvcCallback:function(data){
            console.log(data)
              // 其中，data为getNVCVal()函数的值，该函数为二次验证滑动或者刮刮卡通过后的回调函数。
              // data与业务请求一同上传，由后端请求AnalyzeNvc接口并返回100或者900。
          },
          //业务键字段，可为空。该参数可用于上线前测试，请按照代码集成后测试部分中的方法配置该字段值。
          trans: {"key1": "code0","nvcCode":400},
          //二次验证组件的语言，默认为cn（简体中文）。详细配置方法请参见自定义文案文档。
          language: "cn",
          //当唤醒滑动验证作为二次验证时，配置滑动验证组件的宽度。
          customWidth: 300,
          //当唤醒刮刮卡验证作为二次验证时，配置刮刮卡组件的宽度。
          width: 300,
          //当唤醒刮刮卡验证作为二次验证时，配置刮刮卡组件的高度。
          height: 100,
          //当唤醒刮刮卡验证作为二次验证时，配置需要刮出的两个elements的图片资源。
          elements: [
              '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png',
              '//img.alicdn.com/tfs/TB17cwllsLJ8KJjy0FnXXcFDpXa-50-74.png'
          ], 
          //当唤醒刮刮卡验证作为二次验证时，配置刮动时的背景图像（自动应用平铺填充的方式）。
          bg_back_prepared: '//img.alicdn.com/tps/TB1skE5SFXXXXb3XXXXXXXXXXXX-100-80.png',
          //当唤醒刮刮卡验证作为二次验证时，配置刮动时的前景图像（仅支持base64数据流）。
          bg_front: '',
          //当唤醒刮刮卡验证作为二次验证时，配置验证通过时显示的图标资源。
          obj_ok: '//img.alicdn.com/tfs/TB1rmyTltfJ8KJjy0FeXXXKEXXa-50-74.png',
          //当唤醒刮刮卡验证作为二次验证时，配置验证通过时显示的背景图像（自动应用平铺填充的方式）。
          bg_back_pass: '//img.alicdn.com/tfs/TB1KDxCSVXXXXasXFXXXXXXXXXX-100-80.png',
          //当唤醒刮刮卡验证作为二次验证时，配置验证失败或异常时显示的图标资源。
          obj_error: '//img.alicdn.com/tfs/TB1q9yTltfJ8KJjy0FeXXXKEXXa-50-74.png',
          //当唤醒刮刮卡验证作为二次验证时，配置验证失败或异常时显示的背景图像（自动应用平铺填充的方式）。
          bg_back_fail: '//img.alicdn.com/tfs/TB1w2oOSFXXXXb4XpXXXXXXXXXX-100-80.png',
          //当唤醒刮刮卡验证作为二次验证时，用于自定义文案。详细配置方法请参见自定义文案文档。
          upLang:{"cn":{
              _ggk_guide: "请摁住鼠标左键，刮出两面盾牌",
              _ggk_success: "恭喜您成功刮出盾牌<br/>继续下一步操作吧",
              _ggk_loading: "加载中",
              _ggk_fail: ['呀，盾牌不见了<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
              _ggk_action_timeout: ['我等得太久啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
              _ggk_net_err: ['网络实在不给力<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题'],
              _ggk_too_fast: ['您刮得太快啦<br/>请', "javascript:noCaptcha.reset()", '再来一次', '或', "http://survey.taobao.com/survey/QgzQDdDd?token=%TOKEN", '反馈问题']
              }
          }
        }
      },
      login() {
        // this.init()
        // await this.initJs(this.jsObj.guide)
        // setTimeout(() => {
        //   var params = 'a=' + window.getNVCVal();
        //   this.yourRegisterRequest('http://cf.aliyun.com/nvc/nvcAnalyze.jsonp', params)
        //   console.log(params)
        // },1000)
      },
      yourRegisterRequest(url, params){
        var callbackName = ('jsonp_' + Math.random()).replace('.', '');
        params += '&callback=' + callbackName;
        var o_scripts = document.getElementsByTagName("script")[0];
        var o_s = document.createElement('script');
        o_scripts.parentNode.insertBefore(o_s, o_scripts);
        //您注册请求的业务回调。
        window[callbackName] = function(json) {
            if(json.result.code == 400) {
                //唤醒滑动验证
                getNC().then(function(){
                    _nvc_nc.upLang('cn', {
                        _startTEXT: "请按住滑块，拖动到最右边",
                        _yesTEXT: "验证通过",
                        _error300: "哎呀，出错了，点击<a href=\"javascript:__nc.reset()\">刷新</a>再来一次",
                        _errorNetwork: "网络不给力，请<a href=\"javascript:__nc.reset()\">点击刷新</a>",
                    })
                    _nvc_nc.reset()
                })
            } else if (json.result.code == 600) {
                //唤醒刮刮卡
                getSC().then(function(){})
            } else if (json.result.code == 700) {
                //唤醒问答验证码。由于问答验证码组件升级中，服务端暂时不会返回code为700的结果。您可以保留该部分的接入代码。
                getLC();
            } else if (json.result.code == 100 || json.result.code == 200) {
                //注册成功
                nvcReset();
                alert("register success!")
            } else if (json.result.code == 800 || json.result.code == 900) {
                //直接拦截
                nvcReset();
                alert("register failed!")
            }
        };
        o_s.src = url + '?' + params;
    },
    async register() {
      // await this.init()
      // await this.initJs(this.jsObj.guide)
      // setTimeout(() => {
        var params = 'a=' + window.getNVCVal();
        console.log(params)

      // },1000)
        this.yourRegisterRequest('http://cf.aliyun.com/nvc/nvcAnalyze.jsonp', params)
    },
      callBack(val) {
        console.log(val)
      }
    }
  }
</script>
<style lang="less" scoped>

</style>